<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.prime.com.tr/ui"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>Liste des musiques</title>
    </h:head>
    <h:body>
        <p:layout fullPage="true">
            <p:layoutUnit position="top" height="200">
                <h:form>
                    <p:dataGrid var="artist" value="#{artistsBean.tableArtists}" columns="2" rows="2" paginator="true">
                        <p:column> 
                            <p:fieldset>
                            <p:inplace editor="true" onEditUpdate="msgs">
                                <h:inputText value="#{artist.prenom}" 
                                             required="true" label="prenom" />
                            </p:inplace>
                            </p:fieldset>
                        </p:column>
                        <p:column>
                            <p:fieldset>
                            <p:inplace editor="true" onEditUpdate="msgs">
                                <h:inputText value="#{artist.nom}" 
                                             required="true" label="nom" />
                            </p:inplace>
                             </p:fieldset>
                        </p:column>
                        <p:column>
                            <p:fieldset>
                                <p:commandButton value="Afficher" action="#{musicsBean.genererMusics(artist.id)}" update="listeMusic" />
                             </p:fieldset>
                        </p:column>
                    </p:dataGrid>
                </h:form>
            </p:layoutUnit>
            


            <p:layoutUnit position="center">  
                <p:panel header="Liste des musiques">
                    <h:form id="listeMusic">
                        <p:dataTable var="music" value="#{musicsBean.tableMusic}" id="musicList">
                            <p:column style="width:16px" headerText="Parôles">  
                                <p:rowToggler />  
                            </p:column>

                            <p:column headerText="Nom">  
                                <p:inplace editor="true" onEditUpdate="msgs">  
                                    <p:inputText value="#{music.titre}"  
                                                required="true" label="titre"/>  
                                </p:inplace> 
                            </p:column>
                            
                            <p:column headerText="Auteur">  
                                <h:outputText value="#{music.prenom} #{music.nom}" />  
                            </p:column>

                            <p:rowExpansion>
                                <p:inplace editor="true" onEditUpdate="msgs">  
                                    <p:inputTextarea value="#{music.texte}"  
                                                required="true" label="texte"/>  
                                </p:inplace>  
                            </p:rowExpansion> 
                        </p:dataTable>
                    </h:form>
                </p:panel>
            </p:layoutUnit>
            <p:layoutUnit position="bottom" height="50">  
                <p>
                    <a href="DB/Reset">Reset DB</a>
                </p>
            </p:layoutUnit>
        </p:layout>
    </h:body>
</html>

